import useCheckBox from "./自定义hook-checkBox.tsx";
import React from "react";

const TestCheckBox = () => {
    const useCheckBoxReturn = useCheckBox();

    function submitCheckTest(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        console.log(useCheckBoxReturn.selected);
    }

    return (
        <>
            <form onSubmit={submitCheckTest}>
                <input onChange={useCheckBoxReturn.onChange} type={"checkbox"} name={"爱好"} value={"1"}  checked={useCheckBoxReturn.selected.has("1")}/>
                <span>篮球</span>
                <input onChange={useCheckBoxReturn.onChange} type={"checkbox"} name={"爱好"} value={"2"}  checked={useCheckBoxReturn.selected.has("2")}/>
                <span>足球</span>
                <input onChange={useCheckBoxReturn.onChange} type={"checkbox"} name={"爱好"} value={"3"}  checked={useCheckBoxReturn.selected.has("3")}/>
                <span>排球</span>
                <input onClick={()=>useCheckBoxReturn.selectAll(["1","2","3"])} type={"checkbox"} name={"爱好"}  />
                <span>全选</span>

                <button type={"submit"}>提交</button>
            </form>
        </>)
};
export default TestCheckBox;
